<template>
  <div class="system-task-list">
    <ul class="tools-list" v-for="item in taskList" :key="item.appId">
      <transition-group name="task-create">
        <li
          v-for="child in item.list"
          :key="child.id"
          :class="{ active: child.isChecked, 'other-browser': $route.path !== '/default/desk' }"
          :data-task-bar-id="child.id"
          @contextmenu.stop.prevent="handleContextmenu($event, item.appId, child.id, child.title, child.icon)"
          @click.stop="handleCheckTask(item.appId, child.id)"
        >
          <img :src="getImageUrl(`app/${child.icon.trim()}.png`)" alt="task-icon" />
          <span>{{ child.title }}</span>
        </li>
      </transition-group>
    </ul>
    <task-modal v-model="taskVisible" path="to-top" position-path="normal" :left="taskModalLeft">
      <ul class="task-app-modal">
        <li @click.stop="handleCenterApp">
          <img :src="getImageUrl(`app/${taskModalInfo.icon.trim()}.png`)" alt="task-icon" />
          {{ taskModalInfo.title }}
        </li>
        <li @click.stop="handleCloseApp">
          <span><i class="iconfont wos-close" /></span>
          {{ $t('default.closeWin') }}
        </li>
      </ul>
    </task-modal>
  </div>
</template>

<script setup lang="ts">
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { getImageUrl } from '@/utils/utils'
import { computed, reactive, ref } from 'vue'

const runningTasksStore = useRunningTasksStore()

const taskVisible = ref<boolean>(false)
const taskModalLeft = ref<number>(0)
const taskModalInfo = reactive({
  title: '',
  icon: '',
  appId: '',
  taskId: ''
})
const taskList = computed(() => {
  return runningTasksStore.$state.runningTasks.map((item) => {
    return {
      ...item,
      list: item.list.filter((item) => item.taskBar && item.isTaskBar)
    }
  })
})

// 显示APP
const handleCenterApp = () => {
  const find = runningTasksStore.findTask(taskModalInfo.appId, taskModalInfo.taskId)
  if (find) {
    runningTasksStore.setTaskPatch(taskModalInfo.appId, taskModalInfo.taskId, {
      isMin: false,
      x: (innerWidth - find.width) / 2,
      y: (innerHeight - find.height) / 2,
      endX: (innerWidth - find.width) / 2,
      endY: (innerHeight - find.height) / 2
    })
  }
  taskVisible.value = false
}

// 显示APP
const handleCloseApp = () => {
  runningTasksStore.closeTask(taskModalInfo.appId, taskModalInfo.taskId)
  taskVisible.value = false
}

// 右键弹窗
const handleContextmenu = (ev: MouseEvent, appId: string, taskId: string, title: string, icon: string) => {
  const target = ev.currentTarget as HTMLElement
  const { left, width } = target.getBoundingClientRect()
  taskModalInfo.appId = appId
  taskModalInfo.taskId = taskId
  taskModalInfo.title = title
  taskModalInfo.icon = icon
  taskModalLeft.value = left - (260 - width) / 2
  taskVisible.value = true
}

// 选中显示任务
const handleCheckTask = (appId: string, id: string) => {
  runningTasksStore.setTaskToMin(appId, id, false)
  runningTasksStore.checkedCurrentTask(appId, id)
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/common';
@import '@/assets/scss/mixin';

.task-app-modal {
  width: 260px;
  padding: 10px 0;
  color: var(--task-bar-color);
  background-color: var(--task-modal-bg-color);
  border: 1px solid var(--task-modal-border-color);
  border-bottom: none;

  > li {
    display: flex;
    align-items: center;
    padding-left: 16px;
    height: 30px;

    &:hover {
      @include hover-model;
    }

    img,
    span {
      display: inline-block;
      width: 18px;
      height: 18px;
      object-fit: contain;
      margin-right: 12px;
    }
  }
}

.system-task-list {
  height: 100%;
  display: flex;
  align-items: center;

  .tools-list {
    height: 100%;
    display: flex;

    > li {
      width: 160px;
      max-width: 160px;
      flex: 1 1 160px;
      height: 100%;
      box-sizing: border-box;
      padding: 0 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      transform-origin: left center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      &:hover,
      &.active {
        @include hover-model;
      }

      &.other-browser {
        width: auto;

        > span {
          display: none;
        }
      }

      &.task-create-enter-active,
      &.task-create-leave-active {
        transform: scaleX(1);
        transition: all 0.3s $cubic;
      }

      &.task-create-enter-from,
      &.task-create-leave-to {
        opacity: 0;
        transform: scaleX(0.5);
      }

      img {
        width: 28px;
        height: 28px;
        object-fit: cover;
        margin-right: 5px;
        object-position: center center;
      }

      span {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>
